---
title: 전자 상거래
description: Astro 사이트에 전자상거래 옵션을 추가하는 방법 소개
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';
import ReadMore from '~/components/ReadMore.astro';

Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 서비스 API를 사용한 전체 매장 구축까지 다양한 전자상거래 옵션을 구축할 수 있습니다.

## 결제 처리 오버레이

일부 결제 처리 서비스 (예: [Lemon Squeezy](#lemon-squeezy), [Paddle](#paddle))는 고객이 사이트에서 구매할 수 있도록 결제 양식을 추가합니다. 이는 오버레이로 호스팅되거나 사이트의 페이지에 삽입될 수 있습니다. 이는 몇 가지 기본적인 사용자 정의 또는 사이트 브랜딩을 제공할 수 있으며 Astro 프로젝트에 스크립트, 버튼 또는 외부 링크로 추가될 수 있습니다.

### Lemon Squeezy

[Lemon Squeezy](https://www.lemonsqueezy.com/)는 다중 통화 지원, 글로벌 세금 준수, PayPal 통합 등을 갖춘 결제 및 구독을 위한 올인원 플랫폼입니다. 계정 대시보드를 통해 디지털 제품 및 서비스를 생성 및 관리할 수 있으며 결제 프로세스를 위한 제품 URL을 제공합니다.

기본 [Lemon.js JavaScript 라이브러리](https://docs.lemonsqueezy.com/help/lemonjs/what-is-lemonjs)를 사용하면 결제 링크를 통해 Lemon Squeezy 제품을 판매할 수 있습니다.

#### 기본 사용법

다음은 Astro 페이지에 Lemon Squeezy "Buy Now" 요소를 추가하는 예시입니다. 이 링크를 클릭하면 결제가 열리고 방문자가 단일 구매를 완료할 수 있습니다.

<Steps>
1. 다음 `<script>` 태그를 페이지의 `head` 또는 `body`에 추가하세요.

    ```html title="src/pages/my-product-page.astro"
    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
    ```

2. 제품 URL로 연결되는 페이지에 앵커 태그를 만듭니다. 클릭 시 결제 오버레이를 열려면 `lemonsqueezy-button` 클래스를 포함하세요.

    ```html title="src/pages/my-product-page.astro"
    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
      Buy Now
    </a>
    ```
</Steps>

#### Lemon.js

또한 Lemon.js는 [프로그래밍 방식으로 오버레이 열기](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays) 및 [오버레이 이벤트 처리](https://docs.lemonsqueezy.com/help/lemonjs/handling-events)와 같은 추가 동작을 제공합니다.

<ReadMore> 자세한 내용은 [Lemon Squeezy 개발자 시작 가이드](https://docs.lemonsqueezy.com/guides/developer-guide)를 읽어보세요.</ReadMore>

### Paddle

[Paddle](https://www.paddle.com/)은 디지털 제품 및 서비스에 대한 결제 솔루션입니다. 오버레이 또는 인라인 체크아웃을 통해 결제, 세금 및 구독 관리를 처리합니다.

[Paddle.js](https://developer.paddle.com/paddlejs/overview)는 Paddle을 사용하여 풍부하고 통합된 구독 결제 환경을 구축할 수 있는 경량 JavaScript 라이브러리입니다.

#### 기본 사용법

다음은 Astro 페이지에 Paddle "Buy Now" 요소를 추가하는 예시입니다. 이 링크를 클릭하면 결제가 열리고 방문자가 단일 구매를 완료할 수 있습니다.

기본 결제 링크 도메인 (자신의 웹사이트)이 Paddle에 의해 승인되면 HTML 데이터 속성을 사용하여 페이지의 모든 요소를 결제 오버레이에 대한 트리거로 전환할 수 있습니다.

<Steps>
1. 페이지의 `head` 또는 `body`에 다음 두 개의 `<script>` 태그를 추가하세요.

    ```html title="src/pages/my-product-page.astro"
    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
    <script type="text/javascript">
      Paddle.Setup({ 
        token: '7d279f61a3499fed520f7cd8c08' // 클라이언트 측 토큰으로 대체
      });
    </script>
    ```

2. `paddle_button` 클래스를 추가하여 페이지의 모든 요소를 Paddle Checkout 버튼으로 전환하세요.

    ```html title="src/pages/my-product-page.astro"
    <a href="#" class="paddle_button">Buy Now</a>
    ```

3. 제품의 Paddle `priceId` 및 `quantity`을 지정하려면 `data-items` 속성을 추가하세요. [지원되는 HTML 데이터 속성](https://developer.paddle.com/paddlejs/html-data-attributes)을 선택적으로 추가하여 데이터를 미리 채우거나 결제 성공을 처리하거나 버튼 및 결제 오버레이 스타일을 지정할 수도 있습니다.

    ```html title="src/pages/my-product-page.astro"
    <a 
      href="#"
      class="paddle_button"
      data-display-mode="overlay"
      data-theme="light"
      data-locale="en"
      data-success-url="https://example.com/thankyou"
      data-items='[
        {
          "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
          "quantity": 1
        }
      ]'
    >
      Buy now
    </a>
    ```
</Steps>

#### Paddle.js

HTML 데이터 속성을 전달하는 대신 JavaScript를 사용하여 결제 오버레이로 데이터를 보내 여러 속성과 더 많은 사용자 정의를 전달할 수 있습니다. 인라인 체크아웃을 사용하여 업그레이드 워크플로를 생성할 수도 있습니다.

<ReadMore>[Paddle.js를 사용한 인라인 체크아웃 구축](https://developer.paddle.com/build/checkout/build-branded-inline-checkout)에 대해 자세히 알아보세요.</ReadMore>

## 모든 기능을 갖춘 전자 상거래 솔루션

사이트의 쇼핑 카트 및 결제 프로세스에 대한 추가 사용자 정의를 위해 더 완전한 기능을 갖춘 금융 서비스 제공업체 (예: [Snipcart](#snipcart))를 Astro 프로젝트에 연결할 수 있습니다. 이러한 전자 상거래 플랫폼은 사용자 계정 관리, 개인화, 재고 및 분석을 위해 다른 제3자 서비스와 통합될 수도 있습니다.

### Snipcart

[Snipcart](https://snipcart.com/)는 개발자 중심의 강력한 HTML/JavaScript 쇼핑 카트 플랫폼입니다.

또한 Snipcart를 사용하면 쇼핑 공급자와 같은 제3자 서비스와 통합하고, 쇼핑 카트와 다른 시스템 간의 고급 전자 상거래 통합을 위한 웹후크를 활성화하고, 여러 결제 게이트웨이 (예: Stripe, Paypal 및 Square) 중에서 선택하고, 이메일을 맞춤 설정할 수 있습니다. 템플릿을 제공하며 라이브 테스트 환경도 제공합니다.

:::tip
대신 사전 구축된 Snipcart 솔루션을 원하시나요? 선택적인 디자인 시스템을 포함하여 모든 기능을 갖춘 Astro 커뮤니티 템플릿인 [`astro-snipcart`](https://astro-snipcart.vercel.app/)를 확인하세요. 기존 Snipcart 계정과 통합할 수 있습니다.
:::

#### 기본 사용법

다음은 Snipcart 체크아웃을 구성하고 Astro 페이지에 "Add to cart" 및 "Check out now" 버튼 요소를 추가하는 예시입니다. 이렇게 하면 방문자가 결제 페이지로 즉시 이동하지 않고도 장바구니에 제품을 추가할 수 있습니다.

<ReadMore>Snipcart 스토어 설정을 포함한 전체 지침은 [Snipcart 설치 문서](https://docs.snipcart.com/v3/setup/installation)를 참조하세요.</ReadMore>

<Steps>
1. [Snipcart 설치 지침에 나와있는 대로](https://docs.snipcart.com/v3/setup/installation) 페이지의 `<body>` 요소 뒤에 스크립트를 추가하세요.

    ```html title="src/pages/my-product-page.astro"
    <body></body>
    <script>
      window.SnipcartSettings = {
        publicApiKey: "YOUR_API_KEY",
        loadStrategy: "on-user-interaction",
      };

      (function()...); // Snipcart 문서를 참조하세요.
    </script>
    ```

2. [사용 가능한 Snipcart 설정](https://docs.snipcart.com/v3/setup/installation#settings)을 사용하여 `window.SnipcartSettings`를 맞춤설정하여 장바구니의 동작과 모양을 제어하세요.

    ```html title="src/pages/my-product-page.astro"
    <script>
      window.SnipcartSettings = {
        publicApiKey: "YOUR_API_KEY",
        loadStrategy: "manual",
        version: "3.7.1",
        addProductBehavior: "none",
        modalStyle: "side",
      };

      (function()...); // Snipcart 문서를 참조하세요.
    </script>
    ```

3. 클릭 시 장바구니에 항목을 추가하려면 `<button>`과 같은 HTML 요소에 `class="snipcart-add-item"`을 추가하세요. 또한 가격, 설명, 선택 필드 등 [일반적인 Snipcart 제품 속성](https://docs.snipcart.com/v3/setup/products)에 대한 기타 데이터 요소도 포함하세요.

    ```html title="src/pages/my-product-page.astro"
    <button
      class="snipcart-add-item"
      data-item-id="astro-print"
      data-item-price="39.99"
      data-item-description="A framed print of the Astro logo."
      data-item-image="/assets/images/astro-print.jpg"
      data-item-name="Astro Print"
      data-item-custom1-name="Frame color"
      data-item-custom1-options="Brown|Silver[+10.00]|Gold[+20.00]"
      data-item-custom2-name="Delivery instructions"
      data-item-custom2-type="textarea"
    >
      Add to cart
    </button>
    ```

4. `snipcart-checkout` 클래스와 함께 Snipcart 체크아웃 버튼을 추가하여 카트를 열고 손님이 체크아웃 모달로 구매를 완료할 수 있도록 하세요.

    ```html title="src/pages/my-product-page.astro"
    <button class="snipcart-checkout">Click here to checkout</button>
    ```
</Steps>

#### Snipcart JavaScript SDK

[Snipcart JavaScript SDK](https://docs.snipcart.com/v3/sdk/basics)를 사용하면 Snipcart 카트를 프로그래밍 방식으로 구성, 사용자 정의 및 관리할 수 있습니다.

이를 통해 다음과 같은 작업을 수행할 수 있습니다.

- 현재 Snipcart 세션에 대한 관련 정보를 검색하고 카트에 특정 작업을 적용합니다.
- 들어오는 이벤트를 수신하고 콜백을 동적으로 트리거합니다.
- 상태 변경을 수신하고 카트 상태의 전체 스냅샷을 수신합니다.

<ReadMore>Snipcart를 Astro 프로젝트와 통합하는 모든 옵션에 대한 자세한 내용은 [Snipcart 문서](https://docs.snipcart.com/v3/)를 참조하세요.</ReadMore>

#### `astro-snipcart`

Snipcart 사용을 단순화할 수 있는 두 개의 `astro-snipcart` 커뮤니티 패키지가 있습니다.

- [`@lloydjatkinson/astro-snipcart` Astro 템플릿](https://astro-snipcart.vercel.app/): 이 Astro 템플릿에는 즉시 사용 가능한 완전한 전자 상거래 솔루션을 위한 선택적 디자인 시스템이 포함되어 있습니다. Snipcart API와 상호 작용할 수 있는 편리한 Astro 기본 방법인 [`astro-snipcart`를 구축한 동기](https://astro-snipcart.vercel.app/motivation)를 포함한 광범위한 자체 문서 사이트에서 자세히 알아보세요.

- [`@Adammatthiesen/astro-snipcart` 통합](https://github.com/Adammatthiesen/astro-snipcart): 이 통합은 `astro-snipcart` 테마에서 크게 영감을 받았으며 제품 생성, 카트 제어 등을 위해 기존 Astro 프로젝트에 추가할 수 있는 Astro 컴포넌트 (또는 Vue 컴포넌트)를 제공합니다. 자세한 내용은 [전체 튜토리얼](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon)을 참조하세요.

## 커뮤니티 자료

- [실습 경험: Astro로 구축하는 전자상거래 매장?](https://crystallize.com/blog/building-ecommerce-with-astro)
- [Astro를 사용하여 Stripe 결제 처리하기](https://zellwk.com/blog/stripe-astro-recipe/)